<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar back-text="申请售后" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="申请售后" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- end -->
		<view class="tops">
			<view class="resion" @click="isShow = true">
				<view>
					售后诉求（单选）
					<text style="padding-left: 100rpx;" v-if="radios == 1">退款</text>
					<text style="padding-left: 100rpx;" v-if="radios == 2">重新服务</text>
					<text style="padding-left: 100rpx;" v-if="radios == 3">理赔</text>
				</view>
				<image src="../../static/icon/markect.png" mode=""></image>
			</view>
			<!-- 套餐只能申请退款 -->
			<!-- <view class="" style="border-bottom: 1px solid #EEEEEE;padding: 36rpx 70rpx 24rpx 40rpx;">
				<view>售后诉求<text style="padding-left: 100rpx;">申请退款</text></view>
			</view> -->
			<view class="resion" @click="show = true">
				<view>
					售后原因
					<text style="padding-left: 100rpx;">{{radio}}</text>
				</view>
				<image src="../../static/icon/markect.png" mode=""></image>
			</view>
		</view>
		<view class="shop">
			<view class="ress">补充描述和凭证</view>
			<view class="texs">
				<textarea id="border" value="" placeholder="补充描述，有助于商家更好的处理售后问题" v-model="comments" />
				<view class="choose">
					<view class="item" v-for="(item,index) in imgList" :key='index'>
						<image :src="item" mode="" ></image>
						<image class="no" src="../../static/icon/no.png" mode="" @click="del(index)"></image>
					</view>
					<view class="xiuxiu">
					<view class="item" v-if="imgList.length < 6">
						<image src="../../static/icon/cau.png" mode="" @click="unphoto()"></image>
					</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="isShow" mode="bottom">
			<view class="with">
			<view class="withlis"></view>
			<view class="withsouse">售后诉求</view>
			<view class="sourses" @click="isShow = false">取消</view>
			</view>
				<view class="uni-list" style="margin-top: 40rpx;">
					<radio-group @change="radioChanges" @click="isShow = false">
						<label v-for="(item, index) in iters" :key="item.value" style="display: flex;justify-content: space-between;border-bottom: 1px solid #E5E5E5;padding: 20rpx 66rpx 20rpx 36rpx;">
							<view style="color: #666666;font-size: 30rpx;">{{item.name}}</view>
							<view>
								<radio :value="item.value" :checked="index === currents" color="#FCA800" style="transform:scale(0.7)"/>
							</view>
						</label>
					</radio-group>
				</view>
				<view style="height: 50rpx;"></view>
		</u-popup>
		<u-popup v-model="show" mode="bottom">
			<view class="with">
			<view class="withlis"></view>
			<view class="withsouse">售后原因</view>
			<view class="sourses" @click="show = false">取消</view>
			</view>
				<view class="uni-list" style="margin-top: 40rpx;">
					<radio-group @change="radioChange" @click="show = false">
						<label v-for="(item, index) in reasonList" :key="index" style="display: flex;justify-content: space-between;border-bottom: 1px solid #E5E5E5;padding: 20rpx 66rpx 20rpx 36rpx;">
							<view style="color: #666666;font-size: 30rpx;">{{item}}</view>
							<view>
								<radio :value="item" :checked="index === current" color="#FCA800" style="transform:scale(0.7)"/>
							</view>
						</label>
					</radio-group>
				</view>
				<view style="height: 50rpx;" ></view>
		</u-popup>
		
		<view style="height: 100rpx;" ></view>
		<view class="footer">
			<view class="foot_mon">
					<!-- <u-button type="warning" shape="circle" @click="fabu()">提交</u-button> -->
					<u-button type="warning" shape="circle" @click="shopMarket">提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				imgList:[],
				image_array:[],
				show: false,
				isShow: false,
				iters: [{
							value: '1',
							name: '退款',
							checked: 'true'
						},
						{
							value: '2',
							name: '重新服务'
						},
						{
							value: '3',
							name: '理赔'
						}
				    ],
				tuangous:[
					{
								value: '1',
								name: '退款',
								checked: 'true'
							},
							{
								value: '3',
								name: '理赔'
							}
				],
				current: 0,
				currents: 0,
				radio:'退款',
				radios:'1',
				reasonList:[],
				orderId:'',
				orderIssueId:'',
				comments:'',
				orderType:1,//判断是按次还是按月
			};
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.orderIssueId = option.orderIssueId
			if(option.chargeType==5){
				this.iters=this.tuangous
			};
			if(option.type){
				this.orderType=option.type;
			}
			
			this.getReason();
			if(this.orderIssueId){
				this.getDetail();
			}
		},
		methods: {
			radioChanges: function(evt) {
			            for (let i = 0; i < this.iters.length; i++) {
			                if (this.iters[i].value === evt.target.value) {
			                    this.currents = i;
			                    break;
			                }
			            }
						this.radios = evt.target.value
			},
			radioChange: function(evt) {
			            for (let i = 0; i < this.reasonList.length; i++) {
			                if (this.reasonList[i].value === evt.target.value) {
			                    this.current = i;
			                    break;
			                }
			            }
						this.radio = evt.target.value
			},
			getReason(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/reason/list'
				};
				// let data = {};
				_this.http.httpTokenRequest(opts).then(res => {
					if(res.code==200){
						_this.reasonList = res.data
						_this.radio = res.data[0]
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			unphoto(){
				var _this = this
				if (this.imgList.length < 6) {
					var _this = this;
					uni.chooseImage({
						count: 6,
						success: function(res) {
							var arr = [];
							for (var i in res.tempFilePaths) {
								_this.imgList.push(res.tempFilePaths[i]);
							}
							if (res.tempFilePaths.length > 6) {
								uni.showToast({
									icon: 'none',
									title: '最多上传6张图片',
									duration: 1000
								});
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多上传6张图片',
						duration: 1000
					});
				}
			},
			del(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1);
						}
					}
				});
			},
			//提交
			shopMarket2(){
				var _this = this
				_this.imgList=_this.imgList.toString()
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'unit-orders/orderIssue'
				};
				let data = {
					orderId: this.orderId,
					comment:this.comments,
					images:	this.imgList,
					// reason:this.radio
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code==200){
						_this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'shopMarket?orderId='+_this.orderId
							})
						},500)
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			
			
			
			//老版本提交
			shopMarket(){
				var _this = this
				if(_this.orderType == '1'){
					// if(_this.imgList.length > 0){
					// 	_this.image_array = []
					// 	for (let k = 0; k < _this.imgList.length; k++) {
					// 			uni.uploadFile({
					// 				url: this.http.baseUrl +'/common/upload/batch',
					// 				filePath: _this.imgList[k],
					// 				name: 'file',
					// 				fileType: 'image',
					// 				success: (res) => {
					// 					let url_href = JSON.parse(res.data).data[0];
					// 					_this.image_array.push(url_href);
					// 					if (_this.image_array.length == _this.imgList.length) {
										
					// 						uni.hideLoading({
					// 							title: '上传成功'
					// 						})
					// 						 _this.shopMarket2()
					// 					}
										
					// 				}
					// 			});
					// 	}
					// }else{
						
					// }
					 _this.shopMarket2()
				}else{
					var _this = this
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'order-issue/apply'
					};
					let data = {
						orderId: this.orderIssueId?this.orderIssueId:this.orderId,
						comments:this.comments,
						handlingWay:this.radios,
						images:this.image_array,
						reason:this.radio
					};
					_this.http.httpTokenRequest(opts, data).then(res => {
						if(res.code==200){
							_this.$refs.uToast.show({
								title: res.message,
								type: 'success'
							})
							if(_this.orderIssueId){
								_this.orderId=_this.orderIssueId
							}
							setTimeout(function(){
								uni.redirectTo({
									url:'shopMarket?orderId='+_this.orderId,
								})
							},500)
						}else{
							_this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							})
						}
					})
				}
				
			},
			promotion(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/apply'
				};
				let data = {
					orderId: this.orderId,
					handlingWay:this.radios,
					comments:this.comments,
					images:this.image_array,
					reason:this.radio
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code==200){
						_this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'shopMarket?orderId='+_this.orderId
							})
						},500)
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			getDetail(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/info'
				};
				let data = {
					orderId: this.orderId,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=200){
						console.log(res.data,"售后详情")
						// this.imgList = res.data[0].images.split(',')
						this.imgList = res.data[0].imageList
						this.comments = res.data[0].comments
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	/* 导航 */
	.tops{
		color: #666666;font-size: 30rpx;font-weight: 400;
	}
	.resion{
		display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #EEEEEE;padding: 36rpx 70rpx 24rpx 40rpx;
	}
	.resion image{
		width: 14rpx;height: 26rpx;
	}
	.shop {
		padding: 0 40rpx;
	}
	.shop .ress{
		padding-top: 80rpx;padding-left: 20rpx;font-size: 30rpx;color: #666666;font-weight: 400;
	}
	.line {
		border: 4rpx solid #E4E4E4;
	}

	.allorder {
		padding: 15rpx 40rpx 12rpx 40rpx;
	}
	.with{
		display: flex;justify-content: space-between;margin-top: 28rpx;
	}
	.withlis{
		width: 33%;
	}
	.withsouse{
		color: #666666;font-size: 36rpx;font-weight: 400;text-align: center;
	}
	.sourses{
		margin-right: 14rpx;color: #979797;font-size: 30rpx;width: 33%;text-align: right;
	}
	.foot {
		padding: 4rpx 40rpx 160rpx 40rpx;
		font-family: PingFang SC;
	}

	.foot_name {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.lei {
		color: #3F3F3F;
		font-weight: 500;
	}

	.footer {
		// position: fixed;
		// z-index: 99;
		// bottom: 0;
		width: 100%;
		// background: #FFFFFF;
		opacity: 1;
	}

	.foot_mon {
		text-align: center;
		padding: 38rpx 54rpx 32rpx 54rpx;
	}
	.texs{
		padding: 26rpx 20rpx;
	}
	#border{
		width: 650rpx;
		height: 280rpx;
		font-size: 26rpx;
		color: #979797;
		font-weight: 400;
	}
	.choose{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.item{
			width: 184rpx;
			height: 184rpx;
			position: relative;
			margin-right: 25rpx;
			margin-top: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.no{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top:-15rpx;
				right: -15rpx;
			}
		}
	}
	.xiuxiu{
		display: flex;
		align-items: center;
	}
</style>
